<template>
  <div id="basicModification">
    <el-form ref="basicMessage" :model="form.data" label-width="140px" label-position="left" :inline="true" :rules="rules">
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.data.name" maxlength="1024" />
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="form.data.description" maxlength="1024" />
      </el-form-item>
      <el-form-item label="会话保护策略" prop="server_session_protection_policy">
        <el-select v-model="form.data.server_session_protection_policy">
          <el-option v-for="item in server_session_protection_options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="会话保护时长" prop="server_session_protection_time_limit_minutes">
        <el-input v-model.number="form.data.server_session_protection_time_limit_minutes" placeholder="单位：分钟" />
      </el-form-item>
      <el-form-item label="是否自动伸缩" prop="enable_auto_scaling">
        <el-select v-model="form.data.enable_auto_scaling">
          <el-option v-for="item in enable_auto_scaling_options" :key="item.value.toString()" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
<style lang="scss" scoped>
  #basicModification {
    .el-form-item {
      margin-bottom: 20px;
    }
    .el-input {
      width: 280px;
    }
    .el-select {
      width: 280px;
    }
    :deep(.el-input__wrapper) {
      font-size: 12px;
    }
  }
</style>
<script lang="ts" setup>
  import appStore from '@/store'
  import Vue, { ref, reactive, watch } from 'vue'
  import { ElMessage, FormInstance, FormRules } from 'element-plus'
  import FleetsService, { FleetBasicMsg, UpdateFleetRequest } from '@/api/fleetsService'
  import fleetDetails, { ProcessParamType } from '@/api/fleetDetails'
  import { ElMessageBox } from 'element-plus'

  const basicMessage = ref<FormInstance>()

  let formData = reactive({
    name: '',
    description: '',
    server_session_protection_policy: '',
    server_session_protection_time_limit_minutes: 5,
    enable_auto_scaling: true
  })

  let form = reactive({
    data: formData
  })

  const emits = defineEmits(['close', 'get'])
  const props = defineProps(['fleetId'])
  let fleet_id = props.fleetId

  watch(
    () => props.fleetId,
    (newValue, oldValue) => {
      fleet_id = newValue
    }
  )

  const enable_auto_scaling_options = [
    {
      value: true,
      label: '是'
    },
    {
      value: false,
      label: '否'
    }
  ]

  const server_session_protection_options = [
    {
      value: 'NO_PROTECTION',
      label: '不保护'
    },
    {
      value: 'TIME_LIMIT_PROTECTION',
      label: '限时保护'
    }
  ]

  const submitForm: FleetBasicMsg = {
    project_id: appStore.userStore.project_id,
    fleet_id: fleet_id,
    UpdateFleetRequestBody: Object()
  }

  const getFleet: ProcessParamType = {
    project_id: appStore.userStore.project_id,
    fleet_id: fleet_id
  }

  const getFleetDetails = async () => {
    let res = await fleetDetails.getFleet(getFleet)
    form.data.name = res.data.name
    form.data.description = res.data.description
    form.data.server_session_protection_policy = res.data.server_session_protection_policy
    form.data.server_session_protection_time_limit_minutes = res.data.server_session_protection_time_limit_minutes
    form.data.enable_auto_scaling = res.data.enable_auto_scaling
  }
  const submit = async () => {
    let res = await FleetsService.updateBasicMsg(submitForm)
    if (res.status === 204) {
      ElMessage({
        message: '修改成功！',
        type: 'success'
      })
      emits('get')
      emits('close')
    }
  }
  const onSubmit = async () => {
    var basicMessageValid = await basicMessage.value?.validate((valid) => {
      return valid
    })
    if (basicMessageValid) {
      ElMessageBox.confirm('请确定保存修改吗？', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          submitForm.UpdateFleetRequestBody = JSON.parse(JSON.stringify(form.data))
          if (!form.data.server_session_protection_time_limit_minutes) {
            submitForm.UpdateFleetRequestBody.server_session_protection_time_limit_minutes = 5
          }
          submit()
        })
        .catch(() => {})
    }
  }

  defineExpose({ onSubmit })

  const protectionTimeValidate = (rule: any, value: any, callback: any) => {
    if (form.data.server_session_protection_policy == 'TIME_LIMIT_PROTECTION' && !value) {
      callback(new Error('请输入会话保护时长'))
    } else {
      callback()
    }
  }
  const rules = reactive<FormRules>({
    name: [{ required: true, message: '请输入队列名称', trigger: 'blur' }],
    server_session_protection_time_limit_minutes: [
      { type: 'number', min: 5, max: 1440, message: '请输入5-1440范围内的数字', trigger: 'blur' },
      { validator: protectionTimeValidate, trigger: 'blur' }
    ]
  })

  getFleetDetails()
</script>
